<template>
  <el-container>
      <el-header>
          <h3>用户反馈列表</h3>
      </el-header>
    <el-main>
      <el-form :inline="true" ref="form" :model="form">
        <el-form-item prop="phone">
          <el-input v-model="form.phone" placeholder="输入用户的手机号码" suffix-icon="el-icon-search" @keyup.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click.prevent="search">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click.prevent="reset('form')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div class="main">
          <div class="feed-container" v-for="(row, index) in tableData" :key="index" :todo="row" >
            <div class="avatar-name">
              <el-avatar :size="70" :src="row.avatar"></el-avatar>
              <span style="margin-left: 10px; color: gray;">{{row.name}}</span>
              <span style="margin-left: 10px; color: gray;">{{row.phone}}</span>
              <span style="margin-left: 50px; color: gray;">反馈时间: <span style="font-weight: bolder; color: gray;">{{row.create_time}}</span></span>
            </div>
            <el-input type="textarea" style="margin-left:10px; width:70%;" :rows="5" v-model="row.content"></el-input>
            <div class="image-container">
                <el-image style="width: 120px; height: 120px; margin:10px;" v-for="(one, k) in tableData[index].images" :key="k" :todo="one" :src="one" :preview-src-list="[one]"></el-image>
            </div>
          </div>
      </div>
    </el-main>
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="changePage"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import {feedList} from '@/api/feed'
    export default {
        name: "list",
        data () {
            return {
                tableData: [],
                total: 0,
                page: 1,
                pageSize: 10,
                coach_id: 0,
                form: {
                    phone: '',
                },
            };
        },
        methods: {
            changePage(currentValue) {
                var params = {
                    phone: this.form.phone,
                    page: currentValue,
                    size: this.pageSize
                };
                if (this.form.phone.trim().length != 0) {
                    params.phone = this.form.phone.trim();
                }
                var loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    target: document.querySelector('.main')
                });

                feedList(params).then(response => {
                    this.tableData = response.data.list;
                    this.page = Number(response.data.paginate.current);
                    this.pageSize = Number(response.data.paginate.pageSize);
                    this.total = Number(response.data.paginate.total);
                    loading.close();
                });
            },
            reset(ref) {
                this.$refs[ref].resetFields();
            },
            search() {
                var params = {
                    phone: this.form.phone
                };

                if (this.form.phone.trim().length != 0) {
                    params.phone = this.form.phone.trim();
                }

                var loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    target: document.querySelector('.main')
                });

                feedList(params).then(response => {
                    this.tableData = response.data.list;
                    this.page = response.data.paginate.current;
                    this.pageSize = response.data.paginate.pageSize;
                    this.total = response.data.paginate.total;
                    loading.close();
                });
            }
        },
        mounted() {
            var loading = this.$loading({
                lock: true,
                text: '加载中',
                target: document.querySelector('.main')
            });
            this.coach_id = this.$route.query.coach_id;
            feedList({}).then(response => {
                this.tableData = response.data.list;
                this.page = response.data.paginate.current;
                this.pageSize = response.data.paginate.pageSize;
                this.total = response.data.paginate.total;
                loading.close();
            }).catch( err => {

            })
        }
    }
</script>

<style scoped>
  .el-container{
    width: 90%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 10px auto;
  }

  .el-header {
    text-align: center;
  }
  .el-header h3 {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }
  .el-main {
    width: 90%;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: 5px auto;
  }
  .el-footer {
    text-align: center;
  }
  .feed-container {
    width: 100%;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-top: 20px;
  }
  .avatar-name {
    display: flex;
    align-items: center;
    padding: 10px;
  }
</style>
